<template>
    <div class="container">
        <div class="category animated bounceInLeft">
            <el-scrollbar>
                <h2>[基础产品]L7 空间数据可视分析</h2>
                <p class="desc">高性能/高渲染质量的地理空间数据可视化框架。</p>
                <div class="desc">
                    <h4>核心特性</h4>
                    <p>🌏 数据驱动可视化展示：数据驱动，从数到形，支持丰富的地图可视化类型，更好洞察数据。</p>
                    <p>🌏 2D，3D 一体化的海量数据高性能渲染：百万级空间数据实时，动态渲染。</p>
                    <p>🌏 简单灵活的数据接入：支持 CSV，JSON，geojson 等数据格式接入，可以根据需求自定义数据格式，无需复杂的空间数据转换。</p>
                    <p>🌏 多地图底图支持，支持离线内网部署：高德地图国内合法合规的地理底图，Mapbox 满足国际化业务需求。</p>
                </div>
                <div class="demo-wrap">
                    <h4>图表demo</h4>
                    <p v-for="(item,index) in demoList" :key="item.id" @click="toggleDemo(item)"
                       @mouseover="addAnimate($event)" @mouseout="removeAnimate($event)">
                        🌏 {{ index + 1 > 9 ? index + 1 : `0${index + 1}` }}. {{ item.name }}
                    </p>
                </div>
            </el-scrollbar>
        </div>
        <div class="category animated bounceInRight">
            <h2>[扩展产品]L7Plot 地理空间可视化图表库</h2>
            <p class="desc">易于配置、图表丰富、支持定制的地理图表</p>
            <div class="demo-wrap">

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
import useL7Demo from "@/hooks/useL7Demo.hook.ts"
import {addAnimate, removeAnimate} from "@/hooks/common/useCommon.hook";

export default defineComponent({
    name: "L7",
    setup() {
        const {demoList, toggleDemo} = useL7Demo()

        return {
            demoList, toggleDemo,
            addAnimate, removeAnimate
        }
    }
})
</script>

<style scoped lang="less">
@import "~@/common/css/demo.style.less";
</style>
